<template>
  <div class="bg-white pt">
    <Form :label-width="120" ref="form">
      <Row class="pr">
        <Col span="16">
          <FormItem v-if="phone" label="经销商联系手机">
            {{dealer.basicForm.contactMobile}}
          </FormItem>
          <FormItem v-else label="经销商联系手机" prop="distributorMobile">
            <Input placeholder="请输入经销商联系手机" v-model="dealer.basicForm.distributorMobile" :maxlength="60" @on-change="onInputPhoneChange"/>
          </FormItem>
        </Col>
        <Col span="2" v-if="!phone">
          <Button 
            :loading="loading" :disabled='!dealer.basicForm.distributorMobile'
            type="primary" class="ml"
            @click="getInfoByPhone">同步经销商信息</Button>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="经销商编号">
            {{dealer.basicForm.sn}}    
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="是否覆盖签约信息">
            {{dealer.basicForm.isfg ? '是' : '否'}}
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="是否短信通知">
            {{dealer.basicForm.isMessageNotification ? '是' : '否'}}    
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="经销商登录地址">
            {{dealer.basicForm.domianPrefix}}
             <Button size='small' icon='md-copy' data-clipboard-action="copy" :data-clipboard-text="dealer.basicForm.domianPrefix" data-clipboard-target="#jxsDomianPrefix" class="copyBtn"  @click="copyUrl">复制</Button>
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="经销商签约名称">
            {{dealer.basicForm.contactName}}
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="地址">
            {{dealer.basicForm.provinceName}}-{{dealer.basicForm.cityName}}-{{dealer.basicForm.areaName}}
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="详细地址">
            {{dealer.basicForm.address}}    
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="法人身份证正面">
            <img :src="preFixPath + dealer.basicForm.idCardPositivePic + '_340w'" alt="">  
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="法人身份证反面">
            <img :src="preFixPath + dealer.basicForm.idCardNegativePic + '_340w'" alt=""> 
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="16">
          <FormItem label="营业执照">
            <img :src="preFixPath + dealer.basicForm.businessLicensePic + '_340w'" alt="">
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Loader :status="status" @refresh="getData"></Loader>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import { preFixPath } from '@/util'
export default {
  props: {
  },
  data() {
    return {
      form: {
        distributorMobile: ''
      },
      id: this.$route.query.id || '',
      phone: this.$route.query.phone || '',
      distributorId: this.$route.query.distributorId || '',
      loading: false,
      status: 'pass',
      preFixPath: preFixPath
    }
  },
  mounted() {
    this.$route.query.phone && this.getData()
  },
  methods: {
    getData(distributorId) {
      // 获取基本信息
      // 注意 新增的时候用的是phone 编辑的时候是 distributorId
      let params = { 
        distributorId: this.distributorId || distributorId,
        self: this
      }
      this.status = 'loading'
      this.$store.dispatch('getBasicData', params).then(res => {
        this.status = 'pass'
        this.dealer.basicForm.distributorMobile = res.contactMobile
        this.getInfoByPhone()
      })
    },
    copyUrl() {
      let clipboard = new this.$clipboard('.copyBtn')
      clipboard.on('success', e => {
        this.$Message.success('复制成功')
        clipboard.destroy() //使用destroy可以清除缓存
      })
      clipboard.on('error',e => {
        this.$Message.error('复制失败，请手动复制')
        clipboard.destroy()
      })
    },
    getInfoByPhone() {
      const { distributorMobile } = this.dealer.basicForm
      let reg = /^1[0-9]{10}$/
      if(!reg.test(distributorMobile)) return
      this.getInfo(distributorMobile)
    },
    getInfo(distributorMobile) {
      this.loading = true
      this.$ajaxGet(`/distributor/contract/findByPhone/${distributorMobile}`, { phone: distributorMobile }).then(res => {
        this.loading = false
        this.dealer.basicForm = {}
        this.onformDataByPhone(res)
        // 新增的时候 拿到经销商id去请求签约信息列表
        this.$bus.$emit('onSendId', res)
        this.$bus.$emit('onSendData', res)
      }).catch(err => {
        this.loading = false
      })
    },
    onformDataByPhone(val) {
      if (!val.distributorContractDTO) { // 未签约过
        const { name, sn, id,contactName, provinceId, provinceName, cityId, cityName, areaId, areaName,
        address, idCardNegativePic='', idCardPositivePic='', businessLicenseUrl='', contactMobile } = val.distributorDTO;
        let obj = {distributorContractName: name, distributorName:name, sn: sn, distributorId: id, contactName: contactName, provinceId, provinceName, cityId, cityName, areaId, areaName,
        address, idCardNegativePic, idCardPositivePic, businessLicensePic: businessLicenseUrl, distributorMobile: contactMobile }
        this.dealer.basicForm = Object.assign(this.dealer.basicForm, obj)
        this.dealer.basicForm.checkedIdList = (this.dealer.basicForm.areaDTOList || []).map(item => item.areaId)
        this.dealer.basicForm.cardz = idCardPositivePic && [{status: 'finished', imgUrl: this.dealer.basicForm.idCardPositivePic}]
        this.dealer.basicForm.cardf = idCardNegativePic && [{status: 'finished', imgUrl: this.dealer.basicForm.idCardNegativePic}]
        this.dealer.basicForm.yyzz = businessLicenseUrl && [{status: 'finished', imgUrl: this.dealer.basicForm.businessLicensePic}]
        this.dealer.brandDtos = val.brandDtos
      } else {
        this.mergeData(val.distributorContractDTO)
        this.dealer.brandDtos = val.brandDtos
      }
    },
    mergeData(newData) {
      try {
        if (!newData) return
        // 数据转换 - 两个接口对应的字段属性名不一致
        newData.contactMobile = newData.distributorMobile
        newData.sn = newData.distributorSn
        newData.contactName = newData.distributorContractName
        newData.businessLicenseUrl = newData.businessLicensePic
        this.dealer.basicForm = Object.assign(this.dealer.basicForm, newData)
        this.dealer.basicForm.areaDTOList = (newData.resultAreaDTOList || []).map(item => {
          return { areaId: item.areaId, areaName:item.areaName }
        })
        this.dealer.basicForm.idCardNegativePic = newData.idCardNegativePic
        this.dealer.basicForm.idCardPositivePic = newData.idCardPositivePic
        this.dealer.basicForm.businessLicensePic = newData.businessLicensePic
        this.dealer.basicForm.checkedIdList = (this.dealer.basicForm.areaDTOList || []).map(item => item.areaId)
        const { currentBrandId, currentBrandName } = newData
        this.dealer.basicForm.currentDistributorBrandDTO = { brandId: currentBrandId, brandName: currentBrandName }
        this.dealer.basicForm.cardz = [{status: 'finished', imgUrl: this.dealer.basicForm.idCardPositivePic}]
        this.dealer.basicForm.cardf = [{status: 'finished', imgUrl: this.dealer.basicForm.idCardNegativePic}]
        this.dealer.basicForm.yyzz = [{status: 'finished', imgUrl: this.dealer.basicForm.businessLicensePic}]
      } catch (error) {}
    }
  },
  computed: {
    ...mapState([
      'dealer'
    ]),
    ...mapGetters([
      'basicForm'
    ])
  }
}
</script>